<template>
	<div class="flower">

		<div class="content" v-if="whichse==0">
			<div class="banner">
				<image :src="shopinfo.banner" mode="widthFix"></image>
			</div>
			<div class="flextit">
				<h4>{{shopinfo.title}}<span>营业中</span></h4>
				<span>8:00-22:00</span>
			</div>

			<div class="line"></div>
			<div class="hot_select_title pr">火爆热销
				<div class="line_l pa"></div>
				<div class="line_r pa"></div>
				<div class="line_ll pa"></div>
				<div class="line_rr pa"></div>
			</div>

			<div class="listDiv" style="margin-top:10px">
				<ul class="listul">
					<li v-for="i in flowerlist" :key="index">
						<div class="prodiv">
							<div class="imgdiv" style=" position:relative; z-index:5">
								<a :href="'/pages/fprod/main?id='+i.id">
									<img :src="'https://tp5.blver.cn'+i.goods_image">
								</a>
							</div>
							<a :href="'/pages/fprod/main?id='+i.id">
								<div class="proname">
									{{i.goods_title}} </div>
								<div class="prodesc">
									<span style="color: #CC3300;">{{i.goods_cailiao}} </span> </div>
							</a>
							<div class="protext">
								<div class="proprice">
									￥{{i.selling_price}}元 </div>
								<div class="addcart">
									<a>
										购买
									</a>
								</div>
							</div>
						</div>
					</li>

				</ul>
				<div style="clear:both">
				</div>
			</div>

		</div>

		<div class="bodyDiv" v-if="whichse==1">

			<div class="nctouch-main-layout">
				<div class="categroy-rgt" id="categroy-rgt" style="left:0; position:static;">

					<dl class="categroy-child-list " parent-id="20" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">

						<template v-for="(i,index) in classfiy">
							<dt><a href="javascript:;"><i :class="'col'+index"></i>{{i.name}}<i class="arrow-r"></i></a></dt>
							<dd v-for="(item,index2) in i.value">
								<a :href="'/pages/prolist/main?type=tags&id='+item.id" v-if="i.type=='tags'">{{item.name}}</a>
								<a :href="'/pages/prolist/main?type=spec&name='+item" v-if="i.type=='spec'">{{item}}</a>
							</dd>

						</template>
					</dl>
				</div>
			</div>
			<div style="height:60px"></div>
			<div style="height:5px; line-height:5px; clear:both"></div>
			<!--footer S-->

		</div>

		<div v-if="whichse==2">
			<button class="login" open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo" v-if="!userinfo">微信登陆</button>
			<div class="scroll-content " v-if="userinfo">
				<div class="info-wrapper">
					<div class="icon-wrapper">
						<img :src="userinfo.avatarurl" alt="" v-if="userinfo" />

					</div>
					<div class="login-content" v-if="userinfo">
						<div class="score"><span class="tit">积分</span><span class="scroes">{{userinfo.score}}</span></div>
						{{userinfo.nickname}}
					</div>
				</div>
				<div class="list-wrapper">
					<div class="item-wrapper" tappable="">
						<a href="/pages/orderlist/main"><img alt="我的订单" src="http://www.sxwlrl.com/wap/assets/imgs/mine/order.png">
							<span>我的订单</span>
							<i class="icon iconfont icon-you"></i>
						</a>
					</div>
					<div class="item-wrapper" tappable="">
						<a href="/pages/goodaddress/main"><img alt="收获地址" src="http://www.sxwlrl.com/wap/assets/imgs/mine/insured.png">
							<span>收获地址</span>
							<i class="icon iconfont icon-you"></i>
						</a>
					</div>

					<div class="item-wrapper" v-if="userinfo && userinfo.is_distribution==1">
						<a href="/pages/blance/main"><img alt="余额明细" src="http://www.sxwlrl.com/wap/assets/imgs/mine/message.png">
							<span>余额明细</span>
							<i class="icon iconfont icon-you"></i>
						</a>
					</div>

					<div class="item-wrapper" tappable="">

						<img alt="联系客服" src="http://www.sxwlrl.com/wap/assets/imgs/mine/contact.png">

						<span>联系客服</span>

						<i class="icon iconfont icon-you"></i>
					</div>
					<div class="item-wrapper" v-if="userinfo && userinfo.is_distribution==1">
						<a href="/pages/cash/main"><img alt="提现申请" src="http://www.sxwlrl.com/wap/assets/imgs/mine/message.png">
							<span>提现申请</span>
							<i class="icon iconfont icon-you"></i>
						</a>
					</div>
				</div>

			</div>
			<div class="page__bd" v-if="userinfo && userinfo.is_distribution==1">
				<div class="weui-cells__title">共享花店</div>
				<div class="shoplist">
					<div class="itemshop" @click="myshop()">
						<i class="iconfont" style="color: #E58088;">&#xe6cc;</i>
						<p>我的店铺</p>
					</div>
					<div class="itemshop" @click="mygoods()">
						<i class="iconfont" style="color: #F6E23C;">&#xe6af;</i>
						<p>我的商品</p>
					</div>
					<div class="itemshop" @click="customoder()">
						<i class="iconfont" style="color: #F7D08A;">&#xe6bd;</i>
						<p>顾客订单</p>
					</div>
					<div class="itemshop" @click="shopma()">
						<i class="iconfont" style="color: #ABDDF6;">&#xe63e;</i>
						<p>店铺管理</p>
					</div>
					<div class="itemshop" @click="code()">
						<i class="iconfont" style="color: #7AB68B;">&#xe678;</i>
						<p>我的二维码</p>
					</div>
					<div class="itemshop">

					</div>
					<div class="itemshop">

					</div>
					<div class="itemshop">

					</div>
					<div style="clear: both;"></div>
				</div>
			</div>

		</div>

		<view class="weui-msg againpower" v-show="isshowpower">

			<view class="weui-msg__text-area">
				<view class="weui-msg__title">警告</view>
				<view class="weui-msg__desc">获取更多授权</view>
			</view>
			<view class="weui-msg__opr-area">
				<view class="weui-btn-area">
					<button class="weui-btn" type="primary" open-type="getUserInfo" @getuserinfo="onGotUserInfo">授权登录</button>

				</view>
			</view>

		</view>

		<botbar></botbar>
	</div>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import botbar from '../../components/botbar'
	import { requests } from "../../../static/js/network"
	export default {
		computed: {
			...mapGetters([
				'whichse',

			]),
		},
		data() {
			return {
				isshowpower: false,
				flowerlist: [],
				classfiy: [],
				userinfo: null,
				shopinfo: {},

			}
		},
		onShareAppMessage(res) {
			if(res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			return {
				title: '我的花店',
				path: '/pages/index/main?fxsid=' + wx.getStorageSync('fxsid'),
				imageUrl: '/static/img/2018-06-10_170257.png'
			}
		},
		onLoad(mres) {			
			let self = this
			wx.checkSession({
				success: function() {
					console.log('sesion存在 3rd是2' + wx.getStorageSync('userinfo').session3rd)

					requests({
						url: `https://tp5.blver.cn/api/wechat/memberCenter`,
						method: "POST",
						data: {
							session3rd: wx.getStorageSync('userinfo').session3rd
						},
						header: {
							'content-type': 'application/json', // 默认值
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: function(res) {
							console.log(res.data.userinfo)
						
							if(res.data.status == 'error') {
								wx.login({
									success: (rr) => {
										wx.setStorage({
											key: "code",
											data: rr.code
										})
									}
								})
								return;
							}
							
							let datas=res.data.userinfo
							let key='session3rd'
							datas[key]=res.data.session3rd
							
							wx.setStorage({
								key: "userinfo",
								data: datas
							})
							self.userinfo = res.data.userinfo

						}
					})

				},
				fail: function() {
					console.log('sesion验证失败')
					wx.login({
						success: (rr) => {
							wx.setStorage({
								key: "code",
								data: rr.code
							})
						}
					})
				}
			})
			if(mres.fxsid != null && mres.fxsid != '') {
				//没有登录或者登陆人不是分销

			
				if(self.userinfo == null || wx.getStorageSync('userinfo').is_distribution == 0) {
				
					requests({
						url: 'https://tp5.blver.cn/api/wechat/indexFxStore', //仅为示例，并非真实的接口地址
						method: "POST",
						data: {
							fxsid: mres.fxsid
						},
						header: {
							'content-type': 'application/json', // 默认值
							'content-type': 'application/x-www-form-urlencoded' // 默认值
						},
						success: function(res) {
							console.log('未登录或者非分销商打开')
							console.log(mres.fxsid)
							
							self.flowerlist = res.data.goods
							self.shopinfo = res.data.storeinfo

							wx.setStorage({
								key: "fxsid",
								data: mres.fxsid
							})
							console.log(mres.fxsid+"被存储")
						}
					})
				}
			} else if(wx.getStorageSync('userinfo').is_distribution == 1) {

				requests({
					url: 'https://tp5.blver.cn/api/wechat/indexFxStore', //仅为示例，并非真实的接口地址
					method: 'POST',
					data: {
						fxsid: wx.getStorageSync('userinfo').fxsid
					},
					header: {
						'content-type': 'application/json', // 默认值
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					success: function(res) {
						console.log('分销商打开')
						console.log(wx.getStorageSync('userinfo').fxsid)
						self.flowerlist = res.data.goods
						self.shopinfo = res.data.storeinfo

						wx.setStorage({
							key: "fxsid",
							data: wx.getStorageSync('userinfo').fxsid
						})
						console.log(wx.getStorageSync('userinfo').fxsid+"被存储")
					}
				})
			} else if(wx.getStorageSync('fxsid')!='' && wx.getStorageSync('fxsid')) {

				requests({
					url: 'https://tp5.blver.cn/api/wechat/indexFxStore', //仅为示例，并非真实的接口地址
					method: 'POST',
					data: {
						fxsid: wx.getStorageSync('fxsid')
					},
					header: {
						'content-type': 'application/json', // 默认值
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					success: function(res) {
						console.log('曾经打开过分享商')
						console.log(wx.getStorageSync('fxsid'))
						self.flowerlist = res.data.goods
						self.shopinfo = res.data.storeinfo

						wx.setStorage({
							key: "fxsid",
							data: wx.getStorageSync('fxsid')
						})
						console.log(wx.getStorageSync('fxsid')+"二次被存储")
					}
				})
			}else {

				requests({
					url: 'https://tp5.blver.cn/api/goods/getGoodsData', //仅为示例，并非真实的接口地址

					data: {
						page: 1,

						type: 'tags',
						id: 27
					},
					header: {
						'content-type': 'application/json', // 默认值
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					success: function(res) {
						console.log('非分销商连接')
						
						self.flowerlist = res.data.msg
						let obj={
							banner:'../../static/img/download.png',
							title:'秋荣花艺'
						}
						
						
						self.shopinfo = obj
					}
				})
			}

			wx.showShareMenu({
				withShareTicket: true
			})

		},
		components: {
			botbar
		},

		methods: {
			code() {
				wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面
					url: "/pages/code/main"
				})
			},
			myshop() {
				wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面
					url: "/pages/myshop/main"
				})
			},
			mygoods() {
				wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面
					url: "/pages/mygoods/main"
				})
			},
			shopma() {
				wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面
					url: "/pages/shopm/main"
				})
			},
			customoder() {
				wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面
					url: "/pages/customorder/main"
				})
			},
			onGotUserInfo(e) {

				let self = this
				self.isshowpower = false
				requests({
					url: `https://tp5.blver.cn/api/wechat/login`,
					method: "POST",
					data: {
						code: wx.getStorageSync('code'),
						iv: e.mp.detail.iv,
						encryptedData: e.mp.detail.encryptedData,
						rawData: e.mp.detail.rawData,
						signature: e.mp.detail.signature
					},
					header: {
						'content-type': 'application/json', // 默认值
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {

						if(res.data.status == 'error') {
							console.log('登陆失败，重新获取code')
							wx.login({
								success: (rr) => {

									wx.setStorage({
										key: "code",
										data: rr.code
									})
								}
							})
							self.isshowpower = true
							return
						}
						console.log('登陆成功，存储信息')
						wx.setStorage({
							key: "userinfo",
							data: res.data
						})
						self.userinfo = res.data
						if(res.data.is_distribution == 1) {
							requests({
								url: 'https://tp5.blver.cn/api/wechat/indexFxStore', //仅为示例，并非真实的接口地址
								method: 'POST',
								data: {
									fxsid: self.userinfo.fxsid
								},
								header: {
									'content-type': 'application/json', // 默认值
									'content-type': 'application/x-www-form-urlencoded' // 默认值
								},
								success: function(res2) {
									self.flowerlist = res2.data.goods
									self.shopinfo = res2.data.storeinfo
									console.log(res.data)
									wx.setStorage({
										key: "fxsid",
										data: res.data.fxsid
									})
								}
							})
						}

					}
				})

			},
			initclass() {
				let self = this

				requests({
					url: 'https://tp5.blver.cn/api/goods/getSpecData', //仅为示例，并非真实的接口地址

					header: {
						'content-type': 'application/json' // 默认值
					},
					success: function(res) {
						self.classfiy = res.data.msg

					}
				})
			}
		},

		created() {
			this.initclass()
		}
	}
</script>

<style lang="scss">
	.flower {
		width: 100%;
		overflow: hidden;
	}
	
	.login {
		width: 50%;
		background: #ED5564;
		border: none;
		color: #fff;
	}
	
	.againpower {
		position: fixed;
		top: 33%;
		z-index: 999;
		left: 50%;
		background: #fff;
		border: 1rpx solid #ccc;
		width: 300px;
		margin-left: -150px;
	}
	
	.shoplist {
		border-bottom: 1rpx solid #ccc;
	}
	
	.itemshop {
		float: left;
		height: 88px;
		font-size: 28rpx;
		width: 24.5%;
		text-align: center;
		border-top: 1rpx solid #ccc;
		border-left: 1rpx solid #ccc;
	}
	
	.itemshop i {
		font-size: 80rpx;
	}
	
	.score span.tit {
		background: #ED5564;
		color: #fff;
		font-size: 24rpx;
		display: inline-block;
		padding: 5rpx 10rpx;
		border: 1rpx solid #ED5564;
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px
	}
	
	.score span.scroes {
		background: #fff;
		font-size: 24rpx;
		display: inline-block;
		padding: 5rpx 10rpx;
		border: 1rpx solid #ED5564;
		border-top-right-radius: 14px;
		border-bottom-right-radius: 14px
	}
	
	.banner {
		image {
			width: 100%;
			height: auto;
		}
	}
	
	.flextit {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		h4 {
			font-size: 36rpx;
			span {
				display: inline-block;
				background: #09BB07;
				border-radius: 30rpx;
				padding: 5rpx 10rpx;
				color: #fff;
				font-size: 24rpx;
			}
		}
		&>span {
			color: #828282;
			font-size: 28rpx;
		}
		&:before {
			content: '';
			position: absolute;
			width: 200%;
			height: 100%;
			left: 0;
			border-bottom: 1rpx solid #F0F0F0;
			transform-origin: 0 0;
			box-sizing: border-box;
		}
	}
	
	.favourable {
		display: flex;
		flex-direction: row;
		align-items: center;
		&>div {
			padding: 20rpx 0;
			padding-left: 50rpx;
			width: 50%;
			image {
				width: 120rpx;
			}
			.tit {
				display: inline-block;
				p {
					color: #8F8F8F;
					font-size: 24rpx;
				}
				h4 {
					font-size: 34rpx;
				}
			}
		}
		&>div:nth-child(1) {
			border-right: 1rpx solid #F0F0F0;
		}
	}
	
	.fenlei_div {
		width: 100%;
		margin: 0px auto;
		left: 0;
		right: 0;
		overflow: hidden;
		border-bottom: 1px solid #f5f5f5;
		padding: 5px 0px;
		.fenlei {
			background: #f2f2f2;
			float: left;
			width: 20%;
			text-align: center;
			border-radius: 4px;
			margin: 5px 2.5%;
			padding: 5px 0px;
			display: block;
			color: #3d3d3d;
		}
	}
	
	.line {
		background: #F0F0F0;
		height: 8px;
	}
	
	.hot_select_title {
		width: 100%;
		font-size: 18px;
		font-family: PingFangSC-Medium, helvetica, 'Heiti SC';
		text-align: center;
		line-height: 56px;
		border-bottom: 1px solid #f5f5f5;
		.line_r {
			width: 42px;
			height: 1px;
			background: #666;
			top: 27px;
			left: 172px;
			right: 0;
			margin: 0 auto;
		}
		.line_l {
			width: 42px;
			height: 1px;
			background: #666;
			top: 27px;
			left: 0;
			right: 172px;
			margin: 0 auto;
		}
		.pa {
			position: absolute;
		}
	}
	
	.pr {
		position: relative;
	}
	
	.listDiv {
		width: 100%;
		max-width: 620px;
		margin: 0px auto;
		margin-top: 0px;
		margin-bottom: 96rpx;
	}
	
	.listul {
		width: 100%;
		padding: 0px;
		margin: 0px auto;
	}
	
	.listul li {
		list-style-type: none;
		text-align: center;
		float: left;
		width: 49.5%;
		height: auto;
		background-color: #FFF
	}
	
	.listul li .prodiv {
		width: 100%;
		min-width: 96px;
		min-height: 124px;
		margin: 0px auto;
		text-align: center;
		padding-top: 4px;
		padding-bottom: 5px;
		max-width: 100%;
		/*max-width:175px;*/
		max-height: none;
	}
	
	.listul li .prodiv img {
		border: 0px #CCCCCC solid;
		width: 100%;
		max-width: 100%;
		max-height: none;
		min-height: 122px;
		min-width: 94px;
	}
	
	.listul li .prodiv a {
		color: #666;
		text-decoration: none
	}
	
	.listul li .prodiv .imgdiv {
		width: 100%;
		max-width: 100%;
		/*max-width:98%;*/
		max-height: none;
		min-width: 94px;
		min-height: 122px;
		margin: 0px auto
	}
	
	.listul li .prodiv .protext {
		width: 98%;
		clear: both;
		margin: 0px auto
	}
	
	.listul li .prodiv .proname {
		line-height: 22px;
		height: 22px;
		color: #333;
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		padding-left: 5px;
	}
	
	.listul li .prodiv .proname a {
		color: #333;
		font-size: 14px;
		font-family: 微软雅黑;
		line-height: 22px;
	}
	
	.listul li .prodiv .prodesc {
		height: 22px;
		color: #999;
		font-size: 12px;
		text-align: left;
		overflow: hidden;
		padding-left: 5px;
	}
	
	.listul li .prodiv .prodesc a {
		color: #999;
		font-size: 14px;
		font-family: 微软雅黑;
		line-height: 22px;
	}
	
	.listul li .prodiv .proprice {
		text-align: left;
		color: #F00;
		font-size: 15px;
		margin-top: 0px;
		width: 55%;
		float: left
	}
	
	.listul li .prodiv .addcart {
		width: 40%;
		float: right;
		text-align: right;
		height: 25px;
	}
	
	.listul li .prodiv .addcart a {
		border: 1px #348B16 solid;
		padding: 3px 10px 3px 10px;
		border-radius: 3px;
		color: #348B16;
		font-size: 13px;
		display: none;
	}
	
	.listul li .prodiv .addico {
		width: 33%;
		float: left;
		height: 40px;
		line-height: 40px;
	}
	
	.listul li .prodiv .addico img {
		max-height: 22px;
		max-width: 22px;
		min-height: 22px;
		min-width: 22px;
		margin-top: 8px
	}
	
	.categroy-child-list {
		font-size: 0;
		width: 100%;
		background-color: #FFF;
	}
	
	.categroy-child-list dt {
		background-color: #FCFCFC;
		margin: 0.2rem 0;
		border-style: solid;
		border-color: #F5F5F5;
		border-width: 0.05rem 0;
	}
	
	.categroy-child-list dt a {
		display: block;
		width: 96%;
		height: 78rpx;
		padding: 0 0 0 4%;
		font-size: 32rpx;
		line-height: 78rpx;
		color: #111;
	}
	
	.categroy-child-list dt i {
		width: 0.4rem;
		height: 0.4rem;
		vertical-align: middle;
		display: inline-block;
		border-radius: 0.2rem;
		margin-right: 0.4rem;
	}
	
	.categroy-child-list dt i.col0 {
		background-color: #ED5564;
	}
	
	.categroy-child-list dt i.col12 {
		background-color: #AC92ED;
	}
	
	.categroy-child-list dt i.col18 {
		background-color: #4FC0E8;
	}
	
	.categroy-child-list dt i.col24 {
		background-color: #A0D468;
	}
	
	.categroy-child-list dt i.col30 {
		background-color: #48CFAE;
	}
	
	.categroy-child-list dt i.col36 {
		background-color: #EC87BF;
	}
	
	.categroy-child-list dt i.col25 {
		background-color: #FFCE55;
	}
	
	.categroy-child-list dt i.col26 {
		background-color: #5D9CEC;
	}
	
	.categroy-child-list dt i.col8 {
		background-color: #FB6E52;
	}
	
	.categroy-child-list dt i.col9 {
		background-color: #AAB2BD;
	}
	
	.categroy-child-list dt i.arrow-r {
		display: block;
		width: 0.6rem;
		height: 0.6rem;
		float: right;
		margin: 0.5rem 0.5rem 0 0;
		opacity: 0.5;
	}
	
	.categroy-child-list dt:first-child {
		margin-top: 0;
	}
	
	.categroy-child-list dd {
		font-size: 24rpx;
		line-height: 0.5rem;
		vertical-align: top;
		display: inline-block;
		width: 1.35rem;
		height: 0.5rem;
		padding: 0.1rem;
		margin-left: 0.3rem;
		border-radius: 0;
	}
	
	.categroy-child-list dd a {
		display: block;
		color: #444;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.info-wrapper {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 20px 13px;
		width: 100vw;
		height: 100px;
	}
	
	.info-wrapper .icon-wrapper {
		margin: 0 11px 0 0;
		width: 60px;
		height: 60px;
		border: 1px solid #fff;
		border-radius: 30px
	}
	
	.info-wrapper .icon-wrapper img {
		width: 60px;
		height: 60px;
		border: 1px solid #fff;
		border-radius: 30px
	}
	
	.info-wrapper .info-content {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1
	}
	
	.info-wrapper .info-content h3 {
		margin: 0 0 9px 0;
		color: #909090;
		font-weight: 700;
		font-size: 1.4rem;
		line-height: 1
	}
	
	.info-wrapper .info-content h4 {
		color: #fff;
		font-size: 1.3rem;
		line-height: 1.2
	}
	
	.info-wrapper .login-content {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1
	}
	
	.button-small-ios {
		font-size: 30rpx;
		padding: 0 .9em;
		display: inline-block
	}
	
	.button-outline-ios {
		border-radius: 4px;
		border-width: 1px;
		border-style: solid;
		border-color: #13B5B1;
		color: #13B5B1;
		background-color: transparent
	}
	
	.list-wrapper {
		padding: 0 13px;
		width: 100vw;
		background: #fff
	}
	
	.list-wrapper .item-wrapper span {
		line-height: 40px
	}
	
	.item-wrapper {
		position: relative;
		width: 100%;
		height: 40px;
		clear: both;
		border-bottom: 1px solid #E1E1E1
	}
	
	.item-wrapper img {
		float: left;
		margin: 9px;
		width: 22px;
		height: 22px
	}
	
	.item-wrapper span {
		color: #323232;
		font-size: 28rpx
	}
	
	.item-wrapper .iconfont {
		position: absolute;
		top: 0;
		right: 37rpx;
		color: #909090;
		font-size: 30rpx;
		line-height: 80rpx
	}
	
	.item-wrapper:last-child {
		border-width: 0
	}
	
	.item-wrapper:active {
		opacity: .8
	}
	
	.content-wrapper {
		background: #EBEBEB
	}
	
	.item-wrapper .bar {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 0 13px;
		width: 100%;
		height: 40px;
		color: #333;
		line-height: 40px
	}
	
	.item-wrapper .bar h4 {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		font-weight: 700;
		font-size: 1.4rem;
		line-height: 40px
	}
	
	.item-wrapper .bar h4 span {
		color: #FF8D04;
		font-size: 1.8rem
	}
	
	.item-wrapper .content {
		padding: 0 13px;
		width: 100%;
		height: 80px;
		border-top: 1px solid #EEE;
		border-bottom: 1px solid #EEE
	}
	
	.item-wrapper .content img {
		float: left;
		margin: 10px 10px 0 0;
		width: 48px;
		height: 48px;
		border-radius: 24px
	}
	
	.item-wrapper .content p {
		margin: 10px 0;
		color: #333;
		font-size: 1.4rem;
		line-height: 1.6rem
	}
	
	.item-wrapper .content span {
		color: #999
	}
	
	.item-wrapper .content:active {
		background: rgba(128, 128, 128, .2)
	}
	
	.upload_input {
		display: none
	}
	
	.item-wrapper {
		position: relative
	}
	
	.item-wrapper h2 {
		overflow: hidden;
		margin-right: 3rem;
		text-overflow: ellipsis;
		white-space: nowrap
	}
	
	.item-ios p {
		overflow: inherit;
		font-size: 28rpx;
		line-height: normal;
		text-overflow: inherit;
		color: #8e9093;
		margin: 0 0 2px
	}
	
	.item-ios ion-thumbnail img,
	.item-ios ion-thumbnail ion-img {
		width: 112rpx;
		height: 112rpx
	}
	
	.label-ios {
		margin: 11px 8px 11px 0
	}
	
	.input-wrapper {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		overflow: hidden;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		-webkit-box-orient: inherit;
		-webkit-box-direction: inherit;
		-webkit-flex-direction: inherit;
		-ms-flex-direction: inherit;
		flex-direction: inherit;
		-webkit-box-align: inherit;
		-webkit-align-items: inherit;
		-ms-flex-align: inherit;
		align-items: inherit;
		-webkit-align-self: stretch;
		-ms-flex-item-align: stretch;
		align-self: stretch;
		text-overflow: ellipsis
	}
	
	ion-label {
		margin: 0;
		display: block;
		overflow: hidden;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		font-size: inherit;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: relative
	}
	
	.item-wrapper .time {
		position: absolute;
		top: 0;
		right: 8px;
		color: gray;
		font-size: 24rpx
	}
</style>